<template>
    <section class="modlude">
        <el-form :inline="true" :model="formSearch" class="form_inline" label-width="100px">
            <el-form-item label="设备名称" size="small">
                <el-input v-model="formSearch.name" placeholder="请选择设备名" clearable></el-input>
            </el-form-item>

            <!-- <el-form-item label="开始时间" size="small">
                <el-date-picker v-model="formSearch.startTime" type="datetime" clearable value-format="yyyy-MM-dd HH:mm:ss"
                    placeholder="开始时间">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间" size="small">
                <el-date-picker v-model="formSearch.endTime" type="datetime" clearable value-format="yyyy-MM-dd HH:mm:ss"
                    placeholder="结束时间">
                </el-date-picker>
            </el-form-item> -->

            <el-form-item label="报警时间" size="small">
            <el-date-picker
                class="range"
                v-model="formSearch.timeRange"
                type="datetimerange"
                clearable
                value-format="yyyy-MM-dd HH:mm:ss"
                range-separator="至"
                start-placeholder="开始"
                end-placeholder="结束"
            ></el-date-picker>
            </el-form-item>

            <el-form-item>
                <el-button size="small" @click="sendData">查 询</el-button>
            </el-form-item>
        </el-form>
    </section>
</template>

<script>
import {
    getSenseLog,
} from '../../../url/api';
export default {
    props: {
    logType: {
      type: String,
      required: true
    }
  },
    data() {
        return {
            checkStrictly: false,
            moduleInfor: {},
            bindRole: {},
            showmenuList: [],
            menuList: [],
            option1: [],
            xqTree: [],
            isAddorUpdate: 1, //1添加、2修改
            formSearch: {
                current: 1,
                size: 10,
                startTime:"",
                endTime:"",
                timeRange: []
            },
            formData: [], //数据
            deleBatch: [], //删除数据
            formUpdate: {}, //修改表单
            total: 0, //数据总数
            pages: 0, //页面总数
            addDialog: false,
            updateDialog: false,
            dialog: false,
            replyType: 1, //1。单个回复 2.批量回复
            formPush: {},
            rules: {
                name: [{ required: true, message: '该项不能为空' }],
                type: [
                    {
                        required: true,
                        message: '该项不能为空',
                        trigger: 'blur',
                    },
                ],
                projectId: [
                    {
                        required: true,
                        message: '该项不能为空',
                        trigger: 'blur',
                    },
                ],
            },
            imageUrl: '',
        };
    },
    methods: {
        sendData(){
        if (this.formSearch.timeRange && this.formSearch.timeRange.length === 2) {
            this.formSearch.startTime = this.formSearch.timeRange[0]
            this.formSearch.endTime = this.formSearch.timeRange[1]
        }
        console.log('emit加载')
        this.formSearch.current = 1
        this.Bus.$emit('sendTableDatapk_sense',{
          formSearch:this.formSearch,
          // total:this.total
      })
      },
      getList(){
            let params = {
                  current:this.formSearch.current,
                  size:this.formSearch.size,
                  name:this.formSearch.name,
                  startTime:this.formSearch.startTime,
                  endTime:this.formSearch.endTime,
                  type:this.$props.logType
            }
            getSenseLog(params).then((res) => {
                        if (res.data.ok) {
                            this.formData = res.data.data.records
                            this.total = res.data.data.total
                        }
                    });
        },
    },
    watch: {
    logType(newValue, oldValue) {
    //   console.log('日志类型从', oldValue, '变为', newValue);
    // this.getList()
    this.formSearch = {
                current: 1,
                size: 10,
                name:"",
                startTime:"",
                endTime:"",
            }
    },
    'formSearch.timeRange': function(newVal) {
    if (!newVal || newVal.length !== 2) {
      this.formSearch.startTime = ''
      this.formSearch.endTime = ''
    }
  }
  },
};
</script>
<style scoped lang='scss'>
.form_inline /deep/ .el-form-item {
    margin: 10px 4px;
}
.form_inline /deep/ .el-date-editor.el-input,
.el-date-editor.el-input__inner {
    width: 156px;
}
/* .cont_box {
    width: 100%;
    display: flex;
}
.cont_box_left,
.cont_box_right {
    flex: 1;
    background: transparent;
    padding: 10px;
}
.cont_box_left {
    margin-right: 10px;
}
.margin10 {
    margin-bottom: 10px;
}
.marginRight {
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
}
.cont_box_right .el-form-item {
    margin-bottom: 20px;
} */
/deep/.range>.el-form-item__content{
    width: 350px;
}
/deep/.el-input__inner[data-v-4c9ed924]  {
    width: 350px;
    max-width: 350px;
}
</style>
